import { useActionRef } from '@/hooks/useActionRef';
import { isSuccess } from '@/services/api';
import { dictionariesType, getPublicDictionaries, getSimList } from '@/services/api/base';
import { getTerminalDetail, SimType, TerminalType } from '@/services/api/terminalAndSim';
import { transformOption } from '@/utils/common';
import { BetaSchemaForm, ProFormColumnsType, ProFormInstance } from '@ant-design/pro-form';

import { useEffect, useRef } from 'react';

type TerminalModalPropsType = {
  id: string | number | null | undefined;
  status: string;
  actionRef?: any;
};

export default (props: TerminalModalPropsType) => {
  const { status, id, actionRef: propsActionRef } = props;
  const formRef = useRef<ProFormInstance>();
  const fromColumns: ProFormColumnsType<any, any>[] = [
    {
      title: '终端编号',
      dataIndex: 'terminalCode',
      fieldProps: {
        disabled: status === 'view' ? true : false,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
          {
            pattern: /^\d{15,17}$/,
            message: '请输入正确的IMEI（15-17位）',
          },
        ],
      },
    },
    {
      title: 'SIM卡号',
      dataIndex: 'simId',
      valueType: 'select',
      fieldProps: {
        disabled: status === 'view' ? true : false,
        showSearch: true,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      request: async (value, ...res) => {
        const { result }: { result: SimType[] } = await getSimList({
          simCode: value.keyWords,
          terminalId: props.id,
        });
        const data = result.map((item: SimType) => {
          return {
            label: item.simCode,
            value: item.id,
          };
        });
        return data;
      },
    },
    {
      title: '终端型号',
      dataIndex: 'terminalModel',
      valueType: 'select',
      fieldProps: {
        disabled: status === 'view' ? true : false,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      request: async () => {
        const { result } = await getPublicDictionaries(dictionariesType.terminal);
        return result ? transformOption(result) : [];
      },
    },
    {
      title: '生产厂家',
      dataIndex: 'producer',
      valueType: 'select',
      fieldProps: {
        disabled: status === 'view' ? true : false,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      request: async () => {
        const { result } = await getPublicDictionaries(dictionariesType.terminalManufacturer);
        return result ? transformOption(result) : [];
      },
    },
    {
      title: '协议类型',
      dataIndex: 'protocolType',
      valueType: 'select',
      fieldProps: {
        disabled: status === 'view' ? true : false,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      request: async () => {
        const { result } = await getPublicDictionaries(dictionariesType.protocol);
        return result ? transformOption(result) : [];
      },
    },
    {
      title: '备注',
      fieldProps: {
        disabled: status === 'view' ? true : false,
      },
      formItemProps: {
        rules: [
          {
            max: 200,
            message: '备注最多可以输入200个字',
          },
        ],
      },
      dataIndex: 'remark',
      valueType: 'textarea',
    },
  ];

  /**
   * 必须调用useActionRef，需要注意调用的顺序。
   * 传入 actionRef。
   */
  useActionRef({ propsActionRef, formRef });

  useEffect(() => {
    if (status !== 'add') {
      getTerminalDetail(id).then((v) => {
        const { result, status }: { result: TerminalType; status: number } = v;
        if (isSuccess(status)) {
          formRef.current?.setFieldsValue(result);
        }
      });
    }
  }, []);

  return (
    <BetaSchemaForm
      formRef={formRef}
      {...{
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      }}
      submitter={{
        render: () => {
          return [];
        },
      }}
      preserve={false}
      layout={'horizontal'}
      layoutType="Form"
      columns={fromColumns}
    />
  );
};
